<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1. 函数声明
        let fun1 = function(){}
        let fun2 = ()=>{} //箭头函数，此处可以省略 function 关键字
        let fun3 = x=>{} //单参数可以省略（），多参数无参数不可以
        let fun4 = x=>console.log(x)//只有一行方法体可以省略{}
        let fun5 = x=>x+1 // 但函数体只有一句返回值的时候，可以省略花括号和 return 语句

        // 2. 使用特点，箭头函数中的 this 关键字
        // 在 JS 中，this 关键字通常用来引用函数所在的对象
        // 或者在函数本身作为构造函数，来引用新对象的实例
        // 但在箭头函数中有所不同
        // 是由箭头函数定义时的上下文来决定的，而不是函数调用时的上下文决定
        // 箭头函数没有自己的this，this指向的是外层上下文环境的this
        // let person = {
        //     name:"张三",
        //     showName:function() {
        //         console.log(this) // 这里的this指的是person
        //         console.log(this.name)
        //     },
        //     viewName:() => {
        //         console.log(this) // 这里的this指的是window
        //         console.log(this.name)
        //     }
        // }
        // person.showName()
        // person.viewName()

        // this 的应用
        function Counter() {
            this.count = 0
            setInterval (()=>{
                this.count++
                console.log(this.count)
            },1000)
        }
        let counter = new Counter()
    </script>
</head>
<body>
    
</body>
</html>